<!doctype html>
<html>
<head>
<script src="js/jquery.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
<title>无标题文档</title>
<style>
/*充值账户*/
.column_box p{ position:absolute;right:4%;top:0; color:#191919;}
/*充值金额*/
.money_box{ height:127px; position:relative; background-color:#fff;}
.money_box h1{ line-height:39px; font-size:14px; color:#65646b; margin-left:4%;}
.money_box h1 span{font-size:12px; color:#ff7f00;}
.money{ float:left; width:20%; height:33px; line-height:33px; text-align:center; color:#191919; margin-left:4%; border:1px solid #ccc; border-radius:3px; box-sizing:border-box; background-position:left top; background-size:19px 19px; background-repeat:no-repeat;}
.money_box input{ width:20%; height:33px; text-align:center; color:#01aff0; border:1px solid #ccc; border-radius:3px; box-sizing:border-box; position:absolute;left:76%;top:39px;}
input:placeholder{color:#191919;}
.choose{ border:1px solid #01aff0; color:#01aff0;}
.first{ height:23px; line-height:23px; width:20%; margin-top:7px; margin-left:auto; margin-right:auto; text-align:center; font-size:12px; color:#65646b; position:relative}
.first .border_top{ top:11px; width:180%;}
.money_box p{ text-align:center; font-size:12px; color:#ff7f00; line-height:12px;}

/* all */
.money_box input::-webkit-input-placeholder { color:#191919; }
.money_box input::-moz-placeholder { color:#191919; } /* firefox 19+ */
.money_box input:-ms-input-placeholder { color:#191919; } /* ie */
.money_box input input:-moz-placeholder { color:#191919; }

/*选择套餐*/
.setmeal_box{ background-color:#fff; position:relative; padding-top:14px;}
.setmeal_title{ line-height:13px; font-size:14px; color:#65646b; margin-left:4%;}
.setmeal{ width:92%; margin-left:4%; position:relative}
.setmeal > h1,.setmeal > h2{ line-height:42px; float:left; font-size:14px; color:#191919;}
.setmeal > h2{ margin-left:10%; color:#c40000;}
.setmeal img{ width:11px; height:auto; position:absolute; left:50%; top:20px;}
.setmeal input{ float:right; width:16px; height:16px; margin-top:13px;}
.text h1{ line-height:13px; font-size:14px; color:#191919; margin-bottom:13px;}
.text h2{ line-height:11px; font-size:12px; color:#191919; margin-bottom:7px;}
.text p{ line-height:17px; font-size:12px; color:#65646b;}
/*推荐人手机号*/
.column_box h1{ line-height:46px; float:left; color:#191919;}
.column_box input{ width:130px; margin-left:27px;}
</style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header">成为会员
    <div class="header_left" onclick="window.history.go(-1)"><img src="images/return.png"></div>
</div>
<!--充值账户-->
<div class="column_box" style="margin-top:14px;">充值帐号
    <div class="border_top"></div>
    <p id="tel2" value="{{$tel}}">{{ $tel }}</p>
    <div class="border_bottom"></div>
</div>
<!--充值金额-->
<div class="money_box">
    <h1>选择充值金额&nbsp;&nbsp;&nbsp;&nbsp;<span>（100起充,200000以下）</span></h1>
    <form method="post" id="cz">
        @csrf
    <div>
    <div name="qian0" class="money ssk choose" style="background-image:url(images/recommend.png/)">500</div>
    <div name="qian1" class="money ssk">1000</div>
    <div name="qian2" class="money ssk">200</div>
    <input name="qian3" class="money" placeholder="其他" type="number">
    </div>
    </form>
    <div class="clearfix"></div>
    <div class="first">首次充值
        <div class="border_top" style="left:-180%;"></div>
        <div class="border_top" style="right:-180%;left:inherit"></div>
    </div>
    <p>充100&nbsp;&nbsp;&nbsp;&nbsp;送100</p>
    <div class="border_bottom"></div>
</div>
<!--选择套餐-->
<div class="setmeal_box">
    <div class="setmeal_title">选择套餐</div>
    <div class="setmeal">
        <h1>充值<span class="zhi">1000</span></h1>
        <h2>送50</h2>
        <img src="images/btn.png" class="up">
        <img src="images/btn1.png" class="down">
        <input type="radio" name="setmeal" value="1000">
        <div class="clearfix"></div>
        <div class="text">
            <h1>送各类券品1张</h1>
            <h2>赠送明细</h2>
            <p>15元代金券一张</p>
            <p>价值25元优质大桶水1次</p>
            <p>价值100元优秀理发师剪发1次</p>
            <p style="padding-bottom:11px;">60元皮具打蜡代金券1张</p>
        </div>
        <div class="border_bottom"></div>
    </div>
    <div class="setmeal">
        <h1>充值<span class="zhi">3000</span></h1>
        <h2>送200</h2>
        <img src="images/btn.png" class="up">
        <img src="images/btn1.png" class="down">
        <input type="radio" name="setmeal" value="3000">
        <div class="clearfix"></div>
        <div class="text">
            <h1>送各类券品1张</h1>
            <h2>赠送明细</h2>
            <p>15元代金券一张</p>
            <p>价值25元优质大桶水1次</p>
            <p>价值100元优秀理发师剪发1次</p>
            <p style="padding-bottom:11px;">60元皮具打蜡代金券1张</p>
        </div>
        <div class="border_bottom"></div>
    </div>
    <div class="setmeal">
        <h1>充值<span class="zhi">5000</span></h1>
        <h2>送500</h2>
        <img src="images/btn.png" class="up">
        <img src="images/btn1.png" class="down">
        <input type="radio" name="setmeal" value="5000">
        <div class="clearfix"></div>
        <div class="text">
            <h1>送各类券品1张</h1>
            <h2>赠送明细</h2>
            <p>15元代金券一张</p>
            <p>价值25元优质大桶水1次</p>
            <p>价值100元优秀理发师剪发1次</p>
            <p style="padding-bottom:11px;">60元皮具打蜡代金券1张</p>
        </div>
    </div>
    <div class="border_bottom"></div>
</div>
<!--推荐人手机号-->
<?php if(!$yao){ ?>
<div class="column_box" style="margin-top:14px; margin-bottom:100px;">
    <div class="border_top"></div>
    <h1>推荐人手机号</h1>
    <input class="tel" id="tel1" placeholder="输入推荐人手机号">
    <div class="border_bottom"></div>
</div>
<?php } ?>
<?php if($yao){ ?>
<div class="column_box" style="margin-top:14px; margin-bottom:100px;">
    <div class="border_top"></div>
    <h1>推荐人手机号</h1>
    <p id="tel3" value="{{ $yao }}}">{{ $yao }}</p>
    <div class="border_bottom"></div>
</div>
<?php } ?>
<!--立即充值-->
<div class="confirm_box">
    <div class="confirm" style="background-color:#01aff0" id="cq">立即充值</div>
</div>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
//隐藏赠送明细
$(".text").hide();
//隐藏套餐列表
$(".setmeal_box").hide();
//点击下拉按钮、显示赠送明细
$(".down").click(
    function(){
        $(".text").hide();
        $(this).siblings(".text").show();
        $(".down").show();
        $(this).hide();
        }
)
//点击收起按钮，隐藏赠送明细
$(".up").click(
    function(){
        $(this).siblings(".text").hide();
        $(this).siblings("img").show();
        }
)
//选择金额，改变所选金额样式
$(".money").click(
    function(){
        $(".money_box input").css("border","1px solid #ccc");
        $(this).addClass("choose").siblings().removeClass("choose");
        $(".setmeal_box").hide();
        $("input[name='qian3']").val('');
        }
)
//选择其他金额，显示金额输入框
$(".money_box input").click(
    function(){
        $(this).css("border","1px solid #01aff0");
        $(this).siblings().removeClass("choose");
        $(".setmeal_box").show();
        $(".money_box input").show();
        }
)
</script>
<script src="/layui/layui.all.js"></script>
<script src="/js/jquery-1.8.3.min.js"></script>
<script>
    $("#cz input").change(
       function(){
           $("input[type='radio']").removeAttr('checked');
       }
    )
    $("input[type='radio']").click(
        function(){
            ssk = $('input[name="setmeal"]:checked ').val();
            $("input[name='qian3']").val(ssk);
        }
    )
     var ww = 0;
    $('#cq').click(function(){
        var tel1= $('#tel1').val();
        var tel2= $('#tel2').html();
        var tel3= $('#tel3').html();
        if(tel1 ==tel2 ){
            alert('推荐人不能填自己');
            return false
        }
        layer.open({
            type: 1
            ,closeBtn: false
            ,area: '300px;'
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['芜湖！起飞','考虑一下']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1s
            ,content: '<div style="padding: 20px; line-height: 22px; background-color: #fff; color: #000; font-weight: 50px; text-align:center;">您确认充钱吗？</div>'
            ,btn1: function(index, layero){
                var shuju=$(".choose").text();
                if(shuju==''){
                    shuju=$(".choose").val();
                }
                var tel = $(".tel").val();
                // console.log(tel);
                $.ajax({
                    type:"POST",
                    url:"recharge_ok",
                    data:{shuju,tel,tel3},
                    dataType:"json",
                    success:function(msg){
                        console.log(msg);
                        if(msg.code == 1){
                            alert(msg.msg);
                            location.href = "/";
                        }else if(msg.code == -1){
                            alert(msg.msg);
                            location.href = 'recharge';
                        }else if(msg.code == -2){
                            alert(msg.msg);
                            location.href = 'recharge';
                        }else if(msg.code == -3){
                            alert(msg.msg);
                            location.href = "recharge";
                        }
                    }
                })
            }
            ,btn2: function(index, layero){
            }
        });
    });
</script>
</body>
</html>